<template>
	<view>
		<Navbar></Navbar>
		<u-tabs-swiper ref="tabs" bg-color="transparent" active-color="#B3723E" :is-scroll="false" :current="current"
			:list="tabList" @change="tabChange"></u-tabs-swiper>
		<view class="u-m-20">
			<view class="u-card-box u-m-b-20" v-for="item in taskList" :key="item.id">
				<view class="u-font-title u-text-line-17">
					<span class="taskTag"
						:class="getTaskStatus(item.status).className" v-if="[0,1,2].includes(current)">{{ getTaskStatus(item.status).title }}</span>
					<span>{{item.title}}</span>
				</view>
				<view class="u-m-t-10 u-font-desc">任务创建时间：{{item.create_time}}</view>
				<view class="task_box">
					<view class="u-flex u-flex-1 u-m-r-10">
						<u-image width="140rpx" height="140rpx" border-radius="20"
							:src="item.from_user_info.head_img"></u-image>
						<view class="u-flex-1 u-m-l-20 u-flex-col u-row-between" style="height: 160rpx;">
							<view class="u-font-title">{{item.from_user_info.name}}</view>
							<view class="u-color-gray u-font-24 u-ellipsis-two">{{item.from_user_info.address}}</view>
							<view class="u-font-desc u-color-puce">
								<span>能量值：</span>
								<span class="u-font-bold">{{item.from_user_info.number}}</span>
							</view>
						</view>
					</view>
					<view class="u-color-blue u-font-desc" @click="goUserDetail(item.from_user_info.id)">查看详情 ></view>
				</view>
				<view class="u-m-t-20 u-flex u-row-center" v-if="current == 2">
					<view class="submit_btn" @click="dealTaskBtn(item)" v-if="[0].includes(item.status)">
						{{ taskBtnText[item.status] }}</view>
				</view>
				<view class="u-m-t-20 u-flex u-row-center" v-else>
					<view class="cancel_btn" v-if="[1,3].includes(item.status)">{{ taskBtnText[item.status] }}</view>
				</view>
			</view>
		</view>
		<Loadmore :status="status"></Loadmore>
		<view style="height: 200rpx;"></view>
		<Bottom :isReturn="true" @confirm="confirm"></Bottom>

		<Modal :show="modal.show" :confirmText="modal.confirm" :cancelText="modal.cancel" :modalContent="modal.content"
			:showCancel="modal.showCancel" @confirm="modalConfirm" @cancel="modal.show = false"></Modal>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import Loadmore from '@/components/Loadmore.vue'
	import Modal from '@/components/Modal.vue'
	import {
		teaTaskList,
		teaConfirm
	} from '@/network/tea.js'
	import reachBottom from '@/mixins/reachBottom.js'
	export default {
		mixins: [reachBottom],
		components: {
			Navbar,
			Bottom,
			Loadmore,
			Modal
		},
		data() {
			return {
				tabList: [{
					name: '我要拜访'
				}, {
					name: '我要提醒'
				}, {
					name: '拜访我的'
				}, {
					name: '提醒我的'
				}],
				current: 0,
				taskList: [],
				taskBtnText: ['确认完成', '已完成', '未拜访', '已失效'],
				modal: {
					show: false,
					showCancel: true,
					confirm: '申请',
					cancel: '取消',
					content: ''
				},
				taskId: 0,
				status: 'loadmore'
			}
		},
		onLoad(options) {
			if (options.tab) {
				this.current = options.tab
			}
			this.getTaskList()
		},
		methods: {
			getTaskList() {
				uni.showLoading({
					title: "加载中"
				})
				const params = {
					type: this.current + 1,
					user_id: uni.getStorageSync("user_id"),
					page: this.page,
					limit: this.pageSize
				}
				teaTaskList(params).then(res => {
					if (res.data.list.length > 0) {
						res.data.list.map(item => {
							switch (item.type) {
								case 1:
									item.title = '您将在未来30天内去拜访或为他/她介绍客户'
									break;
								case 2:
									item.title =
										`${item.user_info.name}将成为提醒员，提醒${item.from_user_info.name}未来30天内拜访${item.baifang_info.name}`
									break;
								case 3:
									item.title = `${item.from_user_info.name}希望在未来30天内去拜访或为您介绍客户`
									break;
								case 4:
									item.title =
										`${item.from_user_info.name}将成为提醒员，提醒${item.user_info.name}未来30天内拜访${item.baifang_info.name}`
									break;
							}
							if (item.is_lose == 1) item.status = 3
							this.taskList.push(item)
						})
					}
					if (res.data.list.length < 10) this.status = 'nomore'
					uni.hideLoading()
				})
			},
			getTaskStatus(status) {
				const data = {
					title: '',
					className: ''
				}
				switch (status) {
					case 0:
						data.title = '待完成'
						data.className = 'u-back-oramage'
						break;
					case 1:
						data.title = '已完成'
						data.className = 'u-back-green'
						break;
					case 2:
						data.title = '未完成'
						data.className = 'u-back-red'
						break;
				}
				return data
			},
			tabChange(val) {
				this.current = val
				this.page = 1
				this.taskList.length = 0
				this.getTaskList()
			},
			dealTaskBtn(data) {
				this.taskId = data.id
				if (data.status == 0) {
					this.modal.content = '是否确认已拜访'
					this.modal.confirm = '确认'
					this.modal.show = true
				}
			},
			modalConfirm() {
				this.modal.show = false
				const params = {
					task_id: this.taskId,
					status: 1
				}
				teaConfirm(params).then(res => {
					this.page = 1
					this.taskList.length = 0
					this.getTaskList()
				})
			},
			goUserDetail(id) {
				uni.navigateTo({
					url: "/teaBureau/teaPersonDetail/teaPersonDetail?id=" + id
				})
			},
			loadData() {
				if (this.loadStatus == 'nomore') return
				this.page++
				this.status = 'loading'
				this.getTaskList()
			}
		}
	}
</script>

<style scoped>
	.task_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #F7F7F7;
		padding: 20rpx;
		margin-top: 20rpx;
	}

	.submit_btn {
		background: #F96257;
		color: #fff;
		padding: 18rpx 100rpx;
		border-radius: 50rpx;
	}

	.cancel_btn {
		background: #868B9A;
		color: #fff;
		padding: 18rpx 100rpx;
		border-radius: 50rpx;
	}

	.taskTag {
		color: #fff;
		font-size: 24rpx;
		padding: 6rpx 10rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}
</style>